import { Image, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import React, { useCallback, useEffect, useState } from 'react'
import Images from '@ASSET/Images'
import api from '@API'
import { getTrendConfig, showToast } from '@UTILS/common'
import { TrendITF } from '@INTERFACES/PlanManagement'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { REPORT_TYPE_ENUM } from '@CONSTANTS/planManagement'
import style from './PlanFeedbackPop.module.scss'

interface ItemProps {
  value: number;
  type: REPORT_TYPE_ENUM;
}

const Item: React.FC<ItemProps> = ({ value, type }) => {
  const { trendIcon, trendText, icon, title } = getTrendConfig(value, type)
  return (
    <View className={style.itemContainer}>
      <Image src={icon} className={style.itemIcon} />
      <View className={style.right}>
        <Text className={style.title}>{title}</Text>
        <View className={style.trendContainer}>
          <Text className={style.trendText}>{trendText}</Text>
          <Image src={trendIcon} className={style.itemIcon} />
        </View>
      </View>
    </View>
  )
}

interface Props {
  onClose: () => void;
  isShow: boolean
}

const PlanFeedbackPop: React.FC<Props> = ({ onClose, isShow }) => {
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState<TrendITF| null>(null)
  const [loadFinish, setLoadFinish] = useState(false)
  const onClickClose = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_feed_back_close.eventId)
    setVisible(false)
    onClose()
  }, [onClose])
  const onClickOk = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_feed_back_ok.eventId)
    setVisible(false)
    onClose()
  }, [onClose])
  const getData = useCallback(async () => {
    try {
      const result = await api.getMyPopup({})
      if (result?.Status !== 'Active') return
      setData(result.Data)
      setVisible(true)
    } catch (e) {
      showToast(e)
    } finally {
      setLoadFinish(true)
    }
  }, [])
  useEffect(() => {
    if (isShow && loadFinish && !visible) {
      onClose()
    }
  }, [isShow, loadFinish, onClose, visible])
  useEffect(() => {
    getData()
  }, [getData])
  if (!isShow || !visible || !data) return null
  const {
    FrequencyTrend,
    TotalTimeTrend,
    OverallRatingTrend,
    LifeImpactTrend
  } = data
  const allTrend = FrequencyTrend > 0 ? '效果一般' : '效果不错'
  const allTrend2 = FrequencyTrend > 0 ? '咨询疼爱管理师获得帮助' : '请继续坚持练习哦'
  return (
    <View className={style.container}>
      <View className={style.content}>
        <Image src={Images.home.bg_feed_back_pop} className={style.bgImage} />
        <View className={style.titleContainer}>
          <View className={style.tipRow}>
            <Text className={style.tipText}>上阶段你的</Text>
            <View className={style.tipRow}>
              <Text className={style.tipText}>{allTrend}</Text>
              <View className={style.tipTextLine} />
            </View>
          </View>
          <Text className={style.tipText}>{allTrend2}</Text>
        </View>
        <View className={style.card}>
          <View className={style.itemRow}>
            <Item value={FrequencyTrend} type={REPORT_TYPE_ENUM.FrequencyTrend} />
            <Item value={TotalTimeTrend} type={REPORT_TYPE_ENUM.TotalTimeTrend} />
          </View>
          <View className={style.line1} />
          <View className={style.line2} />
          <View className={style.itemRow}>
            <Item
              value={OverallRatingTrend}
              type={REPORT_TYPE_ENUM.OverallRatingTrend}
            />
            <Item value={LifeImpactTrend} type={REPORT_TYPE_ENUM.LifeImpactTrend} />
          </View>
        </View>
        <View className={style.btn} onClick={onClickOk}>
          <Text className={style.btnText}>好的</Text>
        </View>
      </View>
      <View className={style.closeBtn} onClick={onClickClose}>
        <Image src={Images.home.white_close} className={style.closeIcon} mode="aspectFit" />
      </View>
    </View>
  )
}

export default PlanFeedbackPop
